<!DOCTYPE html>
<html>
<head>
  <title>We're sorry, but something went wrong (500)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
      #container {
      display: flex;
      }
      @media screen and (max-width: 799px) and (min-width: 1px) {
        #container > div:first-child {
        margin: auto;
        }
        }

        @media screen and (max-width: 1920px) and (min-width: 800px) {
          #container > div:first-child {
          margin-right: auto;
          }
        }

      body {
       font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       font-weight: 300;
    }
    @media screen and (max-width: 1920px) and (min-width: 800px) {
        .dialog{
          background:rgb(236, 236, 236);
          border:1px solid rgb(217, 217, 217);
          text-align:center;
          padding:20px 20px;
          color:blue;
          max-width:50%;
          color:rgb(44, 46, 50);
          border-radius:5px;
        }
      }

      @media screen and (max-width: 800px) and (min-width: 1px) {
          .dialog{
            background:rgb(236, 236, 236);
            border:1px solid rgb(217, 217, 217);
            text-align:center;
            padding:20px 20px;
            margin: 20px 20px 20px 20px;
            max-width:100%;
            color:rgb(44, 46, 50);
            border-radius:5px;
          }
        }

    #options{
      text-align:left;
    }
    textarea{
      width:75%;
      height:100px;
      border:1px solid rgb(182, 182, 182);
      border-radius:3px;
      padding:8px;
      font-size:14px;
    }
    input[type="submit"]{
      width:50%;
      padding:10px;
      background:rgb(12, 181, 140);
      color:white;
      border:0px;
      border-radius:3px;
      font-size:15px;
      margin-top:5px;
      cursor:pointer;
    }

    @media screen and (max-width: 1920px) and (min-width: 800px) {
      #img{
        max-width:50%;
        width: 750px;
        padding:10px;
      }
    }

    @media screen and (max-width: 799px) and (min-width: 1px) {
      #img{
        display: none;
      }
    }

    #call-to-action{
      font-size:20px;
      text-align:left;
    }
    .top-bar .logo{
      width:51px;
      height:30px;
      padding:5px 8px 4px 10px;
      margin-top: 5px;
      fill: white;
      background: black:

    }
    .top-bar nav .nav-search-form input{
      width: calc(30vw - 10px);
      border-radius: 20px;
      border: 1px solid #dedada;
      padding: 4px 12px 5px;
      font-size: 0.8em;
      background: #f5f6f7;
      webkit-appearance: none;

    }
    .top-bar nav{
      max-width: 99%;
      width: 1250px;
      margin: auto;
      position: relative;
    }
    input{
        text-rendering: auto;
        color: initial;
        letter-spacing: normal;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: start;
        margin: 0em;
        font: 11px system-ui;
        -webkit-writing-mode: horizontal-tb;
    }
  </style>
</head>
  <body>
    <div id="container">

    <div id="img">
      <img alt="500 error" src="catmeme.png" style='width:100%;' border="0" alt="Null" />
    </div>

    <div class="dialog">
      <div>
        <h1>500:Internal Server Error</h1>
        <h2>Oops, this isn't where you were trying to go...</h2>

        <div id="call-to-action">Don't worry though, you can return to our homepage by clicking <strong><a href="/">here</a></strong>.

        <br>
        <br>

        <h5>But perhaps this is an opportunity, would you like to:</h5>

          <div id="options">
            <ol>
              <li>
                Explore some great <a href="/t/error">articles</a> the DEV community has written about errors.
              </li>
              <li>
                Learn more about <a href="https://www.google.com/search?q=http+errors+explained&oq=http+errors+explained&gs_l=psy-ab.3..0j0i22i30k1.12420.13930.0.14153.10.10.0.0.0.0.135.1092.4j6.10.0....0...1.1.64.psy-ab..0.10.1091.9ZVfWfG4nMs">HTTP errors.</a>
              </li>
              <li>
                Bravely help us debug this error.
              </li>
            </ol>
          </div>
        </div>

      </div>

      <form action="/feedback_messages" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input name="feedback_type" type="hidden" value="bug-reports" />
        <div class="field">
          <textarea name="feedback" placeholder="If you would like to describe the situation that lead to this error, it would be appreciated :)"></textarea>
        </div>

        <div class="actions">
          <input type="submit" name="commit" value="Send Feedback" />
        </div>
      </form>

    </div>
  </div>
</body>
</html>
